<template>
  <div class="app-container">
    <panel-group :panel-data="panelData" @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

  </div>
</template>

<script>
import { getWareInfo } from '@/api'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'

export default {
  name: 'Dashboard',

  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      lineChartDataTem: {
        wareNum: {
          xData: ['1号库', '2号库', '3号库', '4号库', '5号库', '6号库', '7号库'],
          yData: [120, 82, 91, 154, 162, 140, 145],
          name: '库存总量'
        },
        saleMoney: {
          xData: ['1号库', '2号库', '3号库', '4号库', '5号库', '6号库', '7号库'],
          yData: [180, 160, 151, 106, 145, 150, 130],
          name: '销售总额'
        },
        buyMoney: {
          xData: ['1号库', '2号库', '3号库', '4号库', '5号库', '6号库', '7号库'],
          yData: [120, 90, 100, 138, 142, 130, 130],
          name: '采购总额'
        },
        money: {
          xData: ['1号库', '2号库', '3号库', '4号库', '5号库', '6号库', '7号库'],
          yData: [120, 82, 91, 154, 162, 140, 130],
          name: '销售利润'
        }
      },
      panelData: {
        allWareNum: 0, // 库存总量
        allSaleMoney: 0, // 总销售金额
        allBuyMoney: 0, // 总采购金额
        allMoney: 0 // 总销售利润
      },
      lineChartData: {
        xData: [],
        yData: [],
        name: ''
      },
      showLineChart: false
    }
  },
  created() {
    this.getWareInfos()
  },
  methods: {
    getWareInfos() {
      getWareInfo().then(res => {
        const dataList = res.data
        const xData = []
        const wareNumYData = []
        const saleMoneyYData = []
        const buyMoneyYData = []
        const moneyYData = []
        for (const item of dataList) {
          const { wareName, wareInNum, wareOutNum, wareNumPrice } = item
          this.panelData.allWareNum += (wareInNum - wareOutNum)
          this.panelData.allSaleMoney += wareNumPrice
          xData.push(wareName)
          wareNumYData.push(wareInNum - wareOutNum)
          saleMoneyYData.push(wareNumPrice)
          buyMoneyYData.push(0)
          moneyYData.push(wareNumPrice - 0)
        }
        this.panelData.allMoney = this.panelData.allSaleMoney - this.panelData.allBuyMoney
        this.lineChartDataTem.wareNum.xData = xData
        this.lineChartDataTem.wareNum.yData = wareNumYData
        this.lineChartDataTem.saleMoney.xData = xData
        this.lineChartDataTem.saleMoney.yData = saleMoneyYData
        this.lineChartDataTem.buyMoney.xData = xData
        this.lineChartDataTem.buyMoney.yData = buyMoneyYData
        this.lineChartDataTem.money.xData = xData
        this.lineChartDataTem.money.yData = moneyYData
        this.lineChartData = this.lineChartDataTem['wareNum']
      }).catch(err => {
        console.log(err)
      })
    },

    handleSetLineChartData(type) {
      this.lineChartData = this.lineChartDataTem[type]
    }
  }
}
</script>
